<template>
  <div class="nav">
      <div class="btn_login">
        <el-button type="primary" icon="el-icon-user" @click="login()"
          >登录</el-button
        >
      </div>
      <div class="menu">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
        >
          <el-menu-item index="1"
            ><router-link to="/" style="text-decoration: none;"
              ><span>数据展示</span></router-link
            ></el-menu-item
          >
          <el-menu-item index="2"
            ><router-link to="/data2" style="text-decoration: none;"
              ><span>账户数据</span></router-link
            ></el-menu-item
          >
          <el-menu-item index="3"
            ><router-link to="/data3" style="text-decoration: none;"
              ><span>账户信息</span></router-link
            ></el-menu-item
          >
        </el-menu>
      </div>
</template>
<script>
import { createSocket } from './assets/js/websocket.js'
export default {
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1'
    }
  },
  methods: {
    login() {
      createSocket('ws://175.27.243.236:6060/test')
    }
  }
}
</script>
<style Lang="less" scoped>
.router-link {
  text-decoration: none;
}
.nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
span {
  font-size: 20px;
  color: #000000;
}
.btn_login {
  padding: 10px;
}
@media screen and (max-width: 540px) {
  span {
    font-size: 14px;
  }
  .el-menu-item {
    padding: 10px;
  }
  .el-menu--horizontal > .el-menu-item {
    line-height: 40px;
  }
}
</style>
